大象笔记 > 标签 > Ant Design Pro
2021-12-24 · 阅读 12779 · 字数 466
需求 能方便整合入 Ant Design Form 中 能支持,或者方便扩展,将富文本编辑器中的图片上传至七牛云存储中 备选方案列表 Ant Design 官方推荐了两个: https://ant.design/docs/react/recommendation-cn React Quill。首选推荐。测试了一圈,确实这个最靠谱。 Braft Editor。有 Ant Design 的集成说明文档:https://braft.margox.cn/demos/antd-upload 安装 Braft Editor tyarn add braft-editor 参考文档: https:/ ...
2021-06-24 · 阅读 5220 · 字数 624
安装 Ant Design Charts 依赖 参考 https://charts.ant.design/zh-CN/guide/start tyarn add @ant-design/charts 多数据曲线 Ant Design Charts 并没有给出同一图表多条曲线的配置方法。 查了一下,Ant Design Charts 是基于 G2Plot 的,所以看一下 G2Plot 的文档。 Ant Design Charts 是 G2Plot 的 React 版本,基于 React、TypeScript 封装了所有的 G2Plot 图表,继承了 G2Plot 的所有配置,对 React ...
2021-07-22 · 阅读 8082 · 字数 260
想在 Ant Design Pro 后台中,通过后台接口异步加载 Select 的选项,例如文章的作者。 思路 react effect hook 拉取数据,但是如何保证只在加载时运行一次,而不是结束时还运行一次。实际上用中括号就没有这个烦恼,不指定返回的匿名函数就可以。 获取的数据,如何传递给 select 组件。使用 useState Show me the code: 以 Antd Pro 代码为例 例如下拉选择文章的作者: 引入依赖 import React, {useState, useEffect} from 'react'; import {getAuthors} fro ...
2021-07-20 · 阅读 13300 · 字数 593
需求 我想在 Ant Design Pro 管理后台页面中实现这样一个功能: 统一的系统配置项管理 新增配置项时,需要选择配置项类型:例如字符串、图片、富文本 根据字段类型,分别展示不同的对应 Ant Design 组件:例如 Input 输入框,图片上传组件,富文本编辑组件 这就需要根据类型字段,动态地显示不同的字段。 getFieldValue 搜到需要使用 getFieldValue 来获取依赖字段的当前值,以此为依据来判断该显示不同的组件。 用 github 搜到一段示例代码: https://github.com/SANGET/custom-platform-tool/blob/ ...
2021-07-22 · 阅读 8562 · 字数 233
配置其实很简单,奈何 Ant Design Pro 文档写的有点晦涩,且代码不是最新的 Ant Design Pro 5。 整理了一下。 真实场景是,总部管理员与代理商登录后台看到的功能模块不一样,即左侧菜单显示不同。 需要修改三个地方: src/access.ts return 中添加各种权限配置。 currentUser 为调用后台的用户信息查询接口。 export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) { const { currentUser } = ...
2021-07-22 · 阅读 3898 · 字数 1023
系统架构 代理商与总部使用独立的后台,即两套 ant design pro 前端,但是后台使用同一个 golang gin 后台? 使用同一个前端,分权限的可能性: [X] 省去了两个子域名跨域的麻烦 [X] 登录界面增加角色选项:代理商 / 总部 [X] 针对不同角色,login 接口赋值不同的 token role [X] jwt token 增加 role 字段 [X] 测试是否会影响原管理员登录 [X] golang gin auth middleware 增加角色参数,区分权限校验 [X] currentUser 接口兼容两种角色 [X] [ant design pro 前端 ...
2021-09-07 · 阅读 5239 · 字数 316
执行 tyarn build 完成后,会看到 Antd Pro 项目根目录下多了个 dist 目录。这个即是打包好的线上代码。 从 package.json 可以看到 build 对应的实际命令: "build": "umi build", 将 dist 目录 scp 到生产服务器上,然后增加 nginx 配置: location / { root /home/path_of_project/dist; index index.html index.htm; try_files $uri $uri/ /index.htm ...
2024-10-28 · 阅读 7494 · 字数 141
虽然修改了 Antd Pro V5 的全局 title,但是在加载时,还没有完全加载完的时候, 还是显示的 Ant Design Pro 的标题。 解决方法: 修改 Antd Pro V5 加载时的 title 打开:src/pages/document.ejs 修改里面的 title 部分。 .ejs 是什么格式? Embedded JavaScript templating. 看起来就是一种 JS 的模板格式。 favicon.ico 在哪里替换 public 目录 login 页面的 logo > grep logo.svg -r src/ src/pages/user/Login ...
2021-10-09 · 阅读 8482 · 字数 5842
需求 只需要省市二级选择,而不需要省市区。 网上不少示例使用的是 Ant Design select,实际上用 Cascader 级联选择组件更合理。 最终效果: Ant Design Cascader 级联选择组件 https://ant.design/components/cascader-cn/ 从文档看,label 是可选项,猜测不写 label 则同 value。 interface Option { value: string | number; label?: React.ReactNode; disabled?: boolean; children?: Opt ...
2021-10-28 · 阅读 5809 · 字数 432
例如,我要在数据后台拉取一段时间的代理商交易记录,并进行金额数据合计。 展现形式 可以使用 Antd Pro ProTable 的"表格主体自定义",该区域在 table 列表的上方,更醒目一些。 https://procomponents.ant.design/components/table#%E8%A1%A8%E6%A0%BC%E4%B8%BB%E4%BD%93%E8%87%AA%E5%AE%9A%E4%B9%89 相对 Ant Design Table 的"总结栏","表格主体自定义" 格式更灵活,更醒目。 关键的一点是,Pr ...
2021-10-30 · 阅读 6228 · 字数 478
按钮放在哪里 如 Antd Pro 示例中,放在过滤设置区域还挺合适的。因为导出 Excel 需要遵循过滤条件,如时间段,类型等。 https://procomponents.ant.design/components/table#%E8%A1%A8%E5%8D%95%E6%93%8D%E4%BD%9C%E8%87%AA%E5%AE%9A%E4%B9%89 button or link link 容易实现吧,target 设置一下,在新 tab 页中下载。 可以确认一下,Ant Design 有没有体验更好的组件。之前用过 Ant Design 的上传组件不错。 Ant Design 中 Bu ...
2021-11-08 · 阅读 3119 · 字数 316
开发时倒是好好的,但是再次 clone 到不同目录,或者其他电脑上 clone 之后,先 tyarn 安装依赖,然后 tyarn start 报错: > tyarn start yarn run v1.22.10 $ cross-env UMI_ENV=dev umi dev Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/brows ...
2022-03-10 · 阅读 2761 · 字数 345
Bug 现象 在 Antd Pro V5 数据列表页,点击编辑某个条目,去掉某个字段的内容,保存。 再点击新建,还是编辑的上一条信息。 这时点击保存,实际上是覆盖了上一条的信息,而不是新建了一条信息。 这个问题,之前也有发现过,但是一直没有找到复现的方法。一些用户反馈的复现方法也不好使。 这次好不容易发现了重现步骤,看来是 100% 出现的严重 bug,必须修复一下。 问题定位 又试了几种操作流程: 编辑,然后取消,不保存。再点击新建。一切正常,数据没有串。 点击编辑,再编辑另一条。也正常。 猜测是新建条目并保存之后,全局的 currentRow 没有重置。 const [currentR ...
2022-03-10 · 阅读 10492 · 字数 219
组件返回的日期格式问题 antd 选择日期的控件 DatePicker 是输出的 moment 对象,如: Date: "2022-03-10T03:33:14.737Z" 解决办法: // 在 CreateForm 的 onFinish 里加上 if (value.Date) { value.Date = moment(value.Date).format('YYYY-MM-DD'); } 服务器返回日期字符串的解析问题 Uncaught TypeError: date.clone is not a function 解决办法: // 编辑按钮的点击事件里, ...
2022-05-19 · 阅读 3807 · 字数 185
例如,使用 antd pro 开发的网站管理后台,在服务器部署时,想部署在 /admin 这种非根目录。根目录留给 go gin 的路由处理。 在 nginx 里按照正常 root 配置,访问时会报 404 错误。 config/config.ts 配置方法 需要修改 antd pro 的配置文件: config/config.ts 添加配置: publicPath: '/admin/', base: '/admin/', 打包目录 打包之后,上传服务器,解压后,将 dist 重命名为 admin。 nginx 配置 location /admin { alias /some/path/f ...
生活 | 跑步 清单 足球 鲁班 探索 孤独的美食家 驾驶 电视剧 收纳 奶爸 健康 game 电影 周末 joke |
---|---|
Geek | 健身 Laravel Git Vim MySQL Linux UI Windows SVN 纪录片 管理 Shell 游记 工具 手机 BackboneJS 自建博客 Mac DNS Tornado CDN Django Python AngularJS 理财 前端 Nginx 爬虫 Redis Javascript Browser 浏览器 推广 OAuth CSS PHP Social Networks 安全 运维 创业 杂记 VueJS Android Image IDE Java ReactJS 数据分析 SQLite RESTful 读书笔记 家电 ecshop Vagrant wordpress docker SEO GTD magento mongodb nodejs weex 冷知识 ruby iOS 微信小程序 AI CMS 快应用 backpack 广告联盟 OA 短信 UWP Win CSharp Tampermonkey graphviz 钉钉 WPS 数据字典 微信公众号 Fuchsia Adobe XD SQL Server thinkphp 代码规范 商业模式 Flutter 头痛的问题 serverless 视频制作 国际化 golang 服务器 Kotlin 网站建设 5G 笔记本 图片 spark spring 物联网 InfluxDB 图像识别 postgre rust |
成长的烦恼 | 闲言碎语 待产 不睡觉 写作 程序员 孙心然语录 原则 大鸿语录 |
地球 | 植物 时间 中文 赚钱 国家地理 烟台 一生伏首拜阳明 emoji 弟子规 英文 国际贸易 |